<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { computed, ref } from 'vue'
  import { toast } from '@/utils/utils'
  // 下面这种导入形式在小程序中会报错
  // import { dateFormat } from 'licia'
  // 下面这种导入形式是ok的
  import dateFormat from 'licia/dateFormat'
  import { taskDelay } from '@/apis/task'

  const query = ref({})
  onLoad((_query) => {
    query.value = _query
  })

  const delayTime = ref('')

  const range_minutes = Array.from({ length: 60 }).map((v, i) => i + '分钟')
  const range = ref([['0', '1', '2'].map((v) => v + '小时'), range_minutes])

  const onChange = (e) => {
    console.log(e, 'e')

    if (e.detail.value.join(',') === '0,0') {
      toast('您选择的时间没有延迟')
      delayTime.value = ''
      return
    }

    const [hours, minutes] = e.detail.value

    const delayMilliseconds = hours * 60 * 60 * 1000 + minutes * 60 * 1000
    delayTime.value = dateFormat(
      new Date(new Date(query.value.planDepartureTime).getTime() + delayMilliseconds),
      'yyyy-mm-dd HH:MM:ss'
    )
  }

  const onColumnChange = (e) => {
    console.log(e, 'e')
    if (e.detail.column === 0) {
      if (e.detail.value === 2) {
        range.value[1] = ['0小时']
      } else {
        range.value[1] = range_minutes
      }
    }
  }

  const delayReason = ref('')

  const disabledSubmitBtn = computed(() => {
    return delayTime.value === '' || delayReason.value.length === 0 || delayReason.value.length > 50
  })

  const submit = async () => {
    const formData = {
      id: query.value.id,
      delayTime: delayTime.value.slice(0, -3),
      delayReason: delayReason.value,
    }

    await taskDelay(formData)

    toast('延迟成功，请按时提货！', undefined, true)

    setTimeout(() => {
      uni.switchTab({
        url: '/pages/task/index',
      })
    }, 1500)
  }
</script>

<template>
  <view class="page-container">
    <uni-list :border="false">
      <uni-list-item title="原定时间 " showArrow :rightText="query.planDepartureTime" />
      <uni-list-item title="延迟时间" showArrow>
        <template v-slot:footer>
          <picker
            class="time-picker"
            mode="multiSelector"
            :range="range"
            @change="onChange"
            @columnchange="onColumnChange"
          >
            <text v-if="!delayTime" class="error">不可超过2个小时</text>
            <text v-else>{{ delayTime }}</text>
          </picker>
        </template>
      </uni-list-item>
      <uni-list-item direction="column">
        <template v-slot:body>
          <view class="textarea-wrapper">
            <textarea
              v-model="delayReason"
              class="textarea"
              :class="{ error: delayReason.length > 50 }"
              placeholder-style="color: #818181"
              placeholder="请输入延迟提货原因"
            ></textarea>
            <text class="words-count">{{ delayReason.length }}/50</text>
          </view>
        </template>
      </uni-list-item>
      <uni-list-item :border="false">
        <template v-slot:body>
          <button :disabled="disabledSubmitBtn" class="button" @click="submit">提交</button>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
